/**
 * GSAP动画服务
 * 提供卡片和UI元素的动画效果
 */

import { gsap } from 'gsap'

/**
 * 动画配置接口
 */
interface AnimationConfig {
  /** 动画持续时间 */
  duration?: number
  /** 动画延迟 */
  delay?: number
  /** 缓动函数 */
  ease?: string
  /** 动画完成回调 */
  onComplete?: () => void
}

/**
 * 默认动画配置
 */
const DEFAULT_CONFIG: AnimationConfig = {
  duration: 0.3,
  delay: 0,
  ease: 'power2.out'
}

/**
 * 卡片进入动画
 * @param element 目标元素
 * @param config 动画配置
 */
export function animateCardEnter(
  element: HTMLElement | string,
  config: AnimationConfig = {}
) {
  const finalConfig = { ...DEFAULT_CONFIG, ...config }
  
  // 设置初始状态
  gsap.set(element, {
    opacity: 0,
    y: 30,
    scale: 0.9,
    rotationX: -15
  })
  
  // 执行进入动画
  return gsap.to(element, {
    opacity: 1,
    y: 0,
    scale: 1,
    rotationX: 0,
    duration: finalConfig.duration,
    delay: finalConfig.delay,
    ease: finalConfig.ease,
    onComplete: finalConfig.onComplete
  })
}

/**
 * 卡片退出动画
 * @param element 目标元素
 * @param config 动画配置
 */
export function animateCardExit(
  element: HTMLElement | string,
  config: AnimationConfig = {}
) {
  const finalConfig = { ...DEFAULT_CONFIG, ...config }
  
  return gsap.to(element, {
    opacity: 0,
    y: -30,
    scale: 0.9,
    rotationX: 15,
    duration: finalConfig.duration,
    delay: finalConfig.delay,
    ease: 'power2.in',
    onComplete: finalConfig.onComplete
  })
}

/**
 * 卡片悬停动画
 * @param element 目标元素
 * @param config 动画配置
 */
export function animateCardHover(
  element: HTMLElement | string,
  config: AnimationConfig = {}
) {
  const finalConfig = { ...DEFAULT_CONFIG, duration: 0.2, ...config }
  
  return gsap.to(element, {
    y: -8,
    scale: 1.02,
    boxShadow: '0 20px 40px rgba(50, 236, 138, 0.3)',
    duration: finalConfig.duration,
    ease: finalConfig.ease,
    onComplete: finalConfig.onComplete
  })
}

/**
 * 卡片悬停离开动画
 * @param element 目标元素
 * @param config 动画配置
 */
export function animateCardHoverOut(
  element: HTMLElement | string,
  config: AnimationConfig = {}
) {
  const finalConfig = { ...DEFAULT_CONFIG, duration: 0.2, ...config }
  
  return gsap.to(element, {
    y: 0,
    scale: 1,
    boxShadow: '0 8px 25px rgba(50, 236, 138, 0.15)',
    duration: finalConfig.duration,
    ease: finalConfig.ease,
    onComplete: finalConfig.onComplete
  })
}

/**
 * 卡片点击动画
 * @param element 目标元素
 * @param config 动画配置
 */
export function animateCardClick(
  element: HTMLElement | string,
  config: AnimationConfig = {}
) {
  const finalConfig = { ...DEFAULT_CONFIG, duration: 0.1, ...config }
  
  const tl = gsap.timeline()
  
  tl.to(element, {
    scale: 0.95,
    duration: finalConfig.duration,
    ease: 'power2.out'
  })
  .to(element, {
    scale: 1,
    duration: finalConfig.duration,
    ease: 'power2.out',
    onComplete: finalConfig.onComplete
  })
  
  return tl
}

/**
 * 卡片删除动画
 * @param element 目标元素
 * @param config 动画配置
 */
export function animateCardDelete(
  element: HTMLElement | string,
  config: AnimationConfig = {}
) {
  const finalConfig = { ...DEFAULT_CONFIG, duration: 0.4, ...config }
  
  const tl = gsap.timeline()
  
  // 先缩放和旋转
  tl.to(element, {
    scale: 0.8,
    rotation: 5,
    duration: 0.2,
    ease: 'power2.out'
  })
  // 然后淡出并向上移动
  .to(element, {
    opacity: 0,
    y: -50,
    scale: 0.6,
    rotation: -10,
    duration: 0.2,
    ease: 'power2.in',
    onComplete: finalConfig.onComplete
  })
  
  return tl
}

/**
 * 弹窗进入动画
 * @param element 目标元素
 * @param config 动画配置
 */
export function animateDialogEnter(
  element: HTMLElement | string,
  config: AnimationConfig = {}
) {
  const finalConfig = { ...DEFAULT_CONFIG, duration: 0.4, ...config }
  
  // 设置初始状态
  gsap.set(element, {
    opacity: 0,
    scale: 0.8,
    y: 50
  })
  
  return gsap.to(element, {
    opacity: 1,
    scale: 1,
    y: 0,
    duration: finalConfig.duration,
    ease: 'back.out(1.7)',
    onComplete: finalConfig.onComplete
  })
}

/**
 * 弹窗退出动画
 * @param element 目标元素
 * @param config 动画配置
 */
export function animateDialogExit(
  element: HTMLElement | string,
  config: AnimationConfig = {}
) {
  const finalConfig = { ...DEFAULT_CONFIG, duration: 0.3, ...config }
  
  return gsap.to(element, {
    opacity: 0,
    scale: 0.8,
    y: -30,
    duration: finalConfig.duration,
    ease: 'power2.in',
    onComplete: finalConfig.onComplete
  })
}

/**
 * 背景遮罩进入动画
 * @param element 目标元素
 * @param config 动画配置
 */
export function animateOverlayEnter(
  element: HTMLElement | string,
  config: AnimationConfig = {}
) {
  const finalConfig = { ...DEFAULT_CONFIG, duration: 0.3, ...config }
  
  gsap.set(element, { opacity: 0 })
  
  return gsap.to(element, {
    opacity: 1,
    duration: finalConfig.duration,
    ease: finalConfig.ease,
    onComplete: finalConfig.onComplete
  })
}

/**
 * 背景遮罩退出动画
 * @param element 目标元素
 * @param config 动画配置
 */
export function animateOverlayExit(
  element: HTMLElement | string,
  config: AnimationConfig = {}
) {
  const finalConfig = { ...DEFAULT_CONFIG, duration: 0.3, ...config }
  
  return gsap.to(element, {
    opacity: 0,
    duration: finalConfig.duration,
    ease: finalConfig.ease,
    onComplete: finalConfig.onComplete
  })
}

/**
 * 列表项交错进入动画
 * @param elements 目标元素数组
 * @param config 动画配置
 */
export function animateListStagger(
  elements: HTMLElement[] | string,
  config: AnimationConfig = {}
) {
  const finalConfig = { ...DEFAULT_CONFIG, duration: 0.5, ...config }
  
  // 设置初始状态
  gsap.set(elements, {
    opacity: 0,
    y: 30,
    scale: 0.9
  })
  
  return gsap.to(elements, {
    opacity: 1,
    y: 0,
    scale: 1,
    duration: finalConfig.duration,
    stagger: 0.1, // 交错延迟
    ease: finalConfig.ease,
    onComplete: finalConfig.onComplete
  })
}

/**
 * 按钮脉冲动画
 * @param element 目标元素
 * @param config 动画配置
 */
export function animateButtonPulse(
  element: HTMLElement | string,
  config: AnimationConfig = {}
) {
  const finalConfig = { ...DEFAULT_CONFIG, duration: 0.6, ...config }
  
  return gsap.to(element, {
    scale: 1.05,
    duration: finalConfig.duration,
    ease: 'power2.inOut',
    yoyo: true,
    repeat: -1,
    onComplete: finalConfig.onComplete
  })
}

/**
 * 文字打字机效果
 * @param element 目标元素
 * @param text 要显示的文字
 * @param config 动画配置
 */
export function animateTypewriter(
  element: HTMLElement | string,
  text: string,
  config: AnimationConfig = {}
) {
  const finalConfig = { ...DEFAULT_CONFIG, duration: 2, ...config }
  
  const targetElement = typeof element === 'string' 
    ? document.querySelector(element) as HTMLElement
    : element
    
  if (!targetElement) return
  
  targetElement.textContent = ''
  
  return gsap.to(targetElement, {
    duration: finalConfig.duration,
    ease: 'none',
    onUpdate: function() {
      const progress = this.progress()
      const currentLength = Math.floor(progress * text.length)
      targetElement.textContent = text.substring(0, currentLength)
    },
    onComplete: () => {
      targetElement.textContent = text
      finalConfig.onComplete?.()
    }
  })
}

/**
 * 创建时间线动画
 * @returns 返回GSAP时间线实例
 */
export function createTimeline() {
  return gsap.timeline()
}

/**
 * 停止所有动画
 * @param element 目标元素（可选）
 */
export function killAnimations(element?: HTMLElement | string) {
  if (element) {
    gsap.killTweensOf(element)
  } else {
    gsap.killTweensOf('*')
  }
}

/**
 * 设置元素的初始状态
 * @param element 目标元素
 * @param properties CSS属性对象
 */
export function setInitialState(
  element: HTMLElement | string,
  properties: gsap.TweenVars
) {
  gsap.set(element, properties)
}

/**
 * 按钮点击动画
 * @param element 目标元素
 * @param config 动画配置
 */
export function animateButtonClick(
  element: HTMLElement | string,
  config: AnimationConfig = {}
) {
  const finalConfig = { ...DEFAULT_CONFIG, duration: 0.15, ...config }
  
  const tl = gsap.timeline()
  
  tl.to(element, {
    scale: 0.95,
    duration: finalConfig.duration / 2,
    ease: 'power2.out'
  })
  .to(element, {
    scale: 1,
    duration: finalConfig.duration / 2,
    ease: 'power2.out',
    onComplete: finalConfig.onComplete
  })
  
  return tl
}

/**
 * 页面进入动画
 * @param element 目标元素
 * @param config 动画配置
 */
export function animatePageEnter(
  element: HTMLElement | string,
  config: AnimationConfig = {}
) {
  const finalConfig = { ...DEFAULT_CONFIG, duration: 0.8, ...config }
  
  // 设置初始状态
  gsap.set(element, {
    opacity: 0,
    y: 50
  })
  
  return gsap.to(element, {
    opacity: 1,
    y: 0,
    duration: finalConfig.duration,
    ease: 'power2.out',
    onComplete: finalConfig.onComplete
  })
}

/**
 * 列表进入动画
 * @param element 目标元素
 * @param config 动画配置
 */
export function animateListEnter(
  element: HTMLElement | string,
  config: AnimationConfig = {}
) {
  const finalConfig = { ...DEFAULT_CONFIG, duration: 0.6, ...config }
  
  // 设置初始状态
  gsap.set(element, {
    opacity: 0,
    y: 30
  })
  
  return gsap.to(element, {
    opacity: 1,
    y: 0,
    duration: finalConfig.duration,
    ease: 'power2.out',
    onComplete: finalConfig.onComplete
  })
}

/**
 * 初始化GSAP动画服务
 * 设置全局动画配置
 */
export function initializeGSAP() {
  // 设置GSAP全局配置
  gsap.config({
    force3D: true,
    nullTargetWarn: false
  })
  
  // 设置默认缓动函数
  gsap.defaults({
    ease: 'power2.out',
    duration: 0.3
  })
}

/**
 * 动画服务对象
 * 包含所有动画函数的集合
 */
export const animationService = {
  // 卡片动画
  animateCardEnter,
  animateCardExit,
  animateCardHover,
  animateCardHoverOut,
  animateCardClick,
  animateCardDelete,
  
  // 弹窗动画
  animateDialogEnter,
  animateDialogExit,
  animateOverlayEnter,
  animateOverlayExit,
  
  // 列表动画
  animateListStagger,
  animateListEnter,
  
  // 按钮动画
  animateButtonPulse,
  animateButtonClick,
  
  // 页面动画
  animatePageEnter,
  
  // 文字动画
  animateTypewriter,
  
  // 工具函数
  createTimeline,
  killAnimations,
  setInitialState,
  initializeGSAP
}